<template>
	<view class="content">
		<view class="header">
			<!-- 搜索 -->
			<view class="search">
				<input class="uni-input" focus placeholder="请输入店铺名称" @input='shopValue' />
				<view class="screen">
					<view class="icon">


						<image src="../../../static/images/finance/screen.png" mode="heightFix"></image>


						<image src="../../../static/images/finance/screen.png" mode="heightFix"></image>

						<image src="/finance/static/images/screen.png" mode="heightFix"></image>



						<image src="/finance/static/images/screen.png" mode="heightFix"></image>

					</view>
					<view class="font24">
						筛选
					</view>
				</view>
			</view>
		</view>
		<!-- 订单 -->
		<view class="box">
			<view class="order">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
					<view class="item" v-for="(item,index) in shopData" :key="index" @click="to">
						<view class="left">
							<view class="image">
								<image :src="item.image" mode="aspectFit"></image>
							</view>
							<view class="shopInfo">
								<view class="title font30 fontw">
									{{item.name}}
								</view>
								<view class="service">
									<view class="lever font22">


										<image src="../../../static/images/finance/star.png" mode="aspectFit"></image>


										<image src="../../../static/images/finance/star.png" mode="aspectFit"></image>

										<image src="/finance/static/images/star.png" mode="aspectFit"></image>



										<image src="/finance/static/images/star.png" mode="aspectFit"></image>

										{{item.lever || 0}}
									</view>
									<view class="num font22">
										已服务{{item.service || 0}}单
									</view>
								</view>
								<view class="add font22" v-if="item.add">





									<image src="../../../static/images/finance/ladd.png" mode="aspectFit"></image>
									{{item.add}}
								</view>
								<view class="phone font22">
									<image src="../../../static/images/finance/phone.png" mode="aspectFit"></image>





									<image src="/finance/static/images/ladd.png" mode="aspectFit"></image>
									{{item.add}}
								</view>
								<view class="phone font22">
									<image src="/finance/static/images/phone.png" mode="aspectFit"></image>





									{{item.phone}}
								</view>
							</view>
						</view>
						<view class="business">
							<view class="title font22">
								营业时间
							</view>
							<view class="time font18">
								{{item.time}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0, //初始化滚动高度
				shopData: [{


					image: '../../../static/logo.png',


					image: '../../../static/logo.png',

					image: '/static/logo.png',



					image: '/static/logo.png',

					name: '草本中医养生馆草本中医养生馆',
					lever: '4',
					service: '156',
					add: '0.27',
					phone: '682-5956',
					time: '09:00-23:59'
				}, {


					image: '../../../static/logo.png',


					image: '../../../static/logo.png',

					image: '/static/logo.png',



					image: '/static/logo.png',

					name: '草本中医养生馆草本中医养生馆',
					lever: '4',
					service: '156',
					add: '',
					phone: '682-5956',
					time: '09:00-23:59'
				}, {


					image: '../../../static/logo.png',


					image: '../../../static/logo.png',

					image: '/static/logo.png',



					image: '/static/logo.png',

					name: '草本中医养生馆草本中医养生馆',
					lever: '4',
					service: '156',
					add: '',
					phone: '682-5956',
					time: '09:00-23:59'
				}]
			}
		},
		onLoad() {

		},
		methods: {
			shopValue(e) {
				console.log(e.detail.value, '3');
			},
			// 滚动到底部
			scrolltolower() {},
			// 跳转
			to() {
				uni.navigateTo({
					url: '/pages/finance/material/materialD'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.header {
			background-color: #fff;
			width: 100%;

			.search {
				padding: 16rpx 43rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.uni-input {
					flex: 1;
					height: 66rpx;
					padding-left: 36rpx;

					/deep/.input-placeholder {
						font-size: 24rpx
					}
				}

				.screen {
					display: flex;
					align-items: center;

					.icon {
						margin-right: 8rpx;

						image {
							height: 21rpx;
						}
					}
				}
			}
		}

		.box {
			padding: 12rpx 52rpx;

			// 订单
			.order {
				.scroll-Y {
					height: calc(100vh - var(--status-bar-height) - 98rpx);

					.item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 20rpx;

						.left {
							.image {
								width: 165rpx;
								height: 165rpx;
								border-radius: 24rpx;
								overflow: hidden;
								margin-right: 30rpx;

								image {
									width: 165rpx;
									height: 165rpx;
								}
							}

							.shopInfo {
								width: 248rpx;
								height: 165rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.title {
									display: -webkit-box;
									-webkit-line-clamp: 1;
									/* 显示的行数 */
									-webkit-box-orient: vertical;
									overflow: hidden;
								}

								.service {
									display: flex;
									align-items: center;

									.lever {
										color: #F4B937;
										margin-right: 22rpx;
										display: flex;
										align-items: center;

										image {
											width: 21rpx;
											height: 19rpx;
											margin-right: 6rpx;
										}
									}

									.num {
										color: #666666;
									}
								}

								.add {
									color: #666666;
									display: flex;
									align-items: center;

									image {
										width: 16rpx;
										height: 20rpx;
										margin-right: 6rpx;
									}
								}

								.phone {
									color: #666666;
									display: flex;
									align-items: center;

									image {
										width: 16rpx;
										height: 16rpx;
										margin-right: 6rpx;
									}
								}
							}
						}

						.business {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							border: 1px solid #1EB481;
							border-radius: 8rpx;
							overflow: hidden;

							.title {
								width: 110rpx;
								height: 39rpx;
								background: linear-gradient(0deg, #2AB883 0%, #89D894 100%);
								color: #fff;
								text-align: center;
								padding: 4rpx 0;
							}

							.time {
								color: #1EB481;
								padding: 4rpx 0;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
</style>